import React, {useEffect, useState} from 'react';
import * as ReactComponents from '../import';
import { Breadcrumb, Layout, Menu, theme ,Timeline} from 'antd';
import {title,IndexContent} from "../import";
import {MainPage} from "./MainPage";
import {TodoList} from "./TodoList";
const { Header, Content, Sider } = Layout;



const subjectList = [
    {
        label:'react',

        key:'1',
        value:'react',

    },
    {
        label:'git提交记录',

        key:'2',
        value:'gitHistory',

    },
    {
        label:'TODO-LIST',

        key:'3',
        value:'todoList',

    }
]




const titleList = ()=>{
    let result = [];
    title.forEach(v=>{
        let item = {
            label:v.label,
            key:v.key,
            children:v.children,
        };
        result.push(item);
    })
    return result;
}

/**
 * 递归寻找key==targetKey的findKey
 * @param arr
 * @param targetKey
 * @param findKey
 */
const findDescInArray = (arr, targetKey,findKey) => {
    //外层开始
    for(let  i in arr){
        if(arr[i].key === targetKey){
            return arr[i][findKey];
        }else {
            if (arr[i].children &&  Array.isArray(arr[i].children)){
                let result = findDescInArray(arr[i].children, targetKey,findKey);
               if(result){
                   return result;
               }
            }
        }
    }
    return null;
};

const containerStyle = {
    width:'100vw',
    height:'100vh',
    position:'fixed',
    borderRadius:'10px',
    background:'linear-gradient(45deg,#6B4226 0%,#C5A880 50%,#3D271A 100%)',
    backdropFilter:'blur(8px)',
    filter:'drop-shadow(0 2px 4px rgba(0,0,0,0.15))',
    boxShadow:`0 4px 15px rgba(57, 39, 26, 0.3)`,
}

const useExpandState = (initValue)=>{
    const [state, setState] = useState(initValue);
    const setExpandState = (state)=>{
        setState({
            ...initValue,
            ...state
        })
    }

    return [state, setExpandState];
}


export const App = function () {

    const [state, setState] = useExpandState({state:0,compTitle:'类组件初识与类组件中使用useState',desc:'',current:1,codeDir:'',tags:[]})

    const menuClick = ({key})=>{

        setState({
            state:key,
            compTitle:findDescInArray(title,key,'label'),
            desc:findDescInArray(title,key,'desc'),
            codeDir:findDescInArray(title,key,'codeDir'),
            tags:findDescInArray(title,key,'tags')
        })
    }

    const changeCurrent = ({key})=>{
        setState({
            current:Number(key)
        });
    }

    const getComp = current=>{
        switch(current){
            case 1:
                return (
                    <IndexContent title={state.compTitle} desc={state.desc} codeDir={state.codeDir} tags={state.tags}>
                        {findDescInArray(title,state.state,'value')}
                    </IndexContent>
                )
            case 2:
                return (
                <MainPage/>
            );
                case 3:
                    return (
                        <>
                        <TodoList/>
                        </>
                    )
        }
    }

    return (
        <>
            <Layout >
                    <Header>
                        <Menu
                            theme={'dark'}
                            mode="horizontal"
                            defaultSelectedKeys={['1']}
                            items={subjectList}
                            onClick={changeCurrent}
                            style={{ flex: 1, minWidth: 0 }}
                        />
                    </Header>
                <Layout>
                    <Layout>
                        <Sider width={400} theme={'light'}>
                            <Menu
                                onClick={menuClick}
                                mode="inline"
                                defaultSelectedKeys={['0']}
                                items={titleList()}
                                defaultOpenKeys={['0']}
                                style={{ flex: 1, minWidth: 0,height:'90vh',overflowY:'scroll',overflowX:'hidden' }}
                            />
                        </Sider>
                        <Content >
                            {
                                getComp(state.current)
                            }
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        </>
    )

};